<!--
 * @Author: hongjianfeng
 * @Date: 2023-07-31 11:16:13
 * @LastEditTime: 2023-08-15 13:42:43
 * @Description: 
 * @FilePath: \info\web\index.html
-->
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <script>
      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
        CSS.supports('top: constant(a)'))
      document.write(
        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
    </script>
    <!-- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> -->
    <title></title>
    <link rel="shortcut icon" href="TemplateData/favicon.ico">
    <link rel="stylesheet" href="TemplateData/style.css">
    <link rel="stylesheet" href="detail.css"/>
  </head>
  <body>
    
    <div id="unity-container" class="unity-desktop">
      <canvas id="unity-canvas" width=960 height=600></canvas>
      <div id="unity-loading-bar">
        <div id="unity-logo"></div>
        <div id="unity-progress-bar-empty">
          <div id="unity-progress-bar-full"></div>
        </div>
      </div>
      <div id="unity-warning"> </div>
      <div id="unity-footer">
        <div id="unity-webgl-logo"></div>
        <div id="unity-fullscreen-button"></div>
        <div id="unity-build-title">人物模型</div>
      </div>
    </div>
    <div id="unity-app" >
      <div v-if="showPage">
        <div v-if="cj === 1 || cj === 2 || cj === 3" class="com-tit mrl75">
          <div class="line"></div>
          {{ titleTop }}
        </div>
        <div v-if="cj === 4">
          <div v-if="queList?.length" class="question-wrap">
            <div class="question mrl75 acea-row row-middle row-between">
              <div hover-class="comm-btn-hover" :class="queIndex === 0 ? '' : ''" @click="handleNext('prev')">上一题</div>
              <div>{{ `${queIndex + 1}/${queList[groupIndex].length}` }} ( {{ queList[groupIndex][queIndex]?.typeName  }} )</div>
              <div hover-class="comm-btn-hover" @click="handleNext('next')">下一题</div>
            </div>
            <div class="que-list">
              <div class="com-tit mrl75 pl40">
                {{ queIndex + 1 }}. {{ queList[groupIndex][queIndex]?.question }}
              </div>
              <div class="que-item acea-row row-middle row-between mrl75">
                  <div class="item" v-for="(citem, cindex) in queList[groupIndex][queIndex]?.ans" :key="cindex"
                  @click="handleQueClick(citem)" :class="citem.act ? 'act' : ''">
                    {{ citem.label }}
                  </div>
              </div>
            </div>
          </div>
          
        </div>
        
        <!-- <div class="audio">
          <audio height="100" width="100" id="audio" autoplay></audio>
          <audio id="audio" controls autoplay playsinline></audio>
          
        </div> -->
        <!-- <audio id="audio" controls="controls" autoplay="autoplay" preload hidden></audio> -->
        <div class="btn-wrap1 comm-fixed-bottom acea-row row-column">
          <!-- <div id="btn" @click="play" class="active">播放</div> -->
          <div v-if="cj == 1" class="mm0 comm-card-item pu">
            <div class="bd">
              <div class="title">华佗方</div>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;您好，我是您的专属AI健康管理专家，华佗方。您可以叫我小薪，我是一款基于AI
              人工智能技术的最新科技医疗应用，在为您提供健康问诊服务的同时，实现个性化的健康管理方案。我传承了古今海量的中医药处方，由上千位专家院士的专业诊断数据集成，为您带来专属的高端健康管理服务。华佗方（AI医生），时刻守护您的健康，为您和家人的健康、幸福保驾护航。让我们一起迈向健康未来！
            </div>
          </div>
          <div v-if="cj == 2" class="mm0 comm-card-item pu flex1">
            <div id="chat-box" class="chat-list">
              <div v-for="(item, index) in txtList" :key="index">
                <div v-if="item.type === 1" class="chat-item mb30 acea-row row-middle">
                  <div class="pic mr30"><image src="http://8.141.90.108:1533/images/user.png"></image></div>
                  <div class="flex1 acea-row row-left">
                    <div class="content l-icon">
                      <div>{{ item.txt }}</div>
                      A.没有 B.很少 C.有时 D.经常 E.总是
                    </div>
                  </div>
                </div>
                <div v-else class="chat-item mb30 acea-row row-middle">
                  <div class="flex1 acea-row row-right">
                    <div class="acea-row content r-icon">
                      {{ item.txt }}
                    </div>
                  </div>
                  <div class="pic ml30"><image :src="avatar"></image></div>
                </div>
              </div>
            </div>
          </div>
  
          <div class="flex1" v-if="cj == 3">
            <div class="com-tit mm0 flex1">
              <div class="line"></div>
              <div class="line-bl"></div>
              <div class="line-br"></div>
              {{ titleTop }}
            </div>
            <div class="mm0 comm-card-item pu">
              <div v-if="isMod" class="h256">
                {{ areaTxt }}
              </div>
              <textarea class="h256" v-else v-model="areaTxt"></textarea>
              <button v-if="isCheck" hover-class="comm-btn-hover" class="comm-btn bw mt30" @click.stop="handleMod">{{ isMod ? '修改' : '保存' }}</button>
            </div>
          </div>
  
          <div v-if="cj == 4" class="mm0 h256 comm-card-item pu flex1">
            <div id="chat-box" class="chat-list">
              <div v-for="(item, index) in txtList" :key="index">
                <div v-if="item.type === 1" class="chat-item mb30 acea-row row-middle">
                  <div class="pic mr30"><image src="http://8.141.90.108:1533/images/user.png"></image></div>
                  <div class="flex1 acea-row row-left">
                    <div class="content l-icon">
                      <div>{{ item.txt }}</div>
                      A.没有 B.很少 C.有时 D.经常 E.总是
                    </div>
                  </div>
                </div>
                <div v-else class="chat-item mb30 acea-row row-middle">
                  <div class="flex1 acea-row row-right">
                    <div class="acea-row content r-icon">
                      {{ item.txt }}
                    </div>
                  </div>
                  <div class="pic ml30"><image :src="avatar"></image></div>
                </div>
              </div>
            </div>
          </div>
          <div  v-if="cj == 2 || cj == 4" class="record-popup" :class="recordPopupShow ? 'act' : ''">
            <div class="inner-content">
              <div class="title">正在录制音频</div>
              <div
                class="voice-line-wrap" v-if="recording">
                <div class="voice-line one"></div>
                <div class="voice-line two"></div>
                <div class="voice-line three"></div>
                <div class="voice-line four"></div>
                <div class="voice-line five"></div>
                <div class="voice-line six"></div>
                <div class="voice-line seven"></div>
                <div class="voice-line six"></div>
                <div class="voice-line five"></div>
                <div class="voice-line four"></div>
                <div class="voice-line three"></div>
                <div class="voice-line two"></div>
                <div class="voice-line one"></div>
              </div>
              <div class="cancel-icon" v-if="!recording">+</div>
              <div class="tips">{{ recording ? '左右滑动后松手完成录音' : '松手取消录音' }}</div>
            </div>
          </div>
          <!-- <button id="testClick" onclick="testClick11()">js与模型点击1交互</button> -->
          <image v-if="cj == 2 || cj == 4" id="btnRecording"  class="btn-bot-img" src="http://8.141.90.108:1533/images/bt-bg2.png"></image>
        </div>
      </div>
    </div>
    <script>
      var container = document.querySelector("#unity-container");
      var canvas = document.querySelector("#unity-canvas");
      var loadingBar = document.querySelector("#unity-loading-bar");
      var progressBarFull = document.querySelector("#unity-progress-bar-full");
      var fullscreenButton = document.querySelector("#unity-fullscreen-button");
      var warningBanner = document.querySelector("#unity-warning");
      var testClick = document.getElementById("testClick");
      var myGameInstance = null;
      var audio = document.querySelector("#audio");

      // Shows a temporary message banner/ribbon for a few seconds, or
      // a permanent error message on top of the canvas if type=='error'.
      // If type=='warning', a yellow highlight color is used.
      // Modify or remove this function to customize the visually presented
      // way that non-critical warnings and error messages are presented to the
      // user.
      function GetScore(score,name){
	      console.log('score:',score);       //log出成绩测试是否成功
      }
      function testClick11(){
          myGameInstance.SendMessage("Main Camera", "fun", "555");
          // 高兴（1）、疑惑（2） 、中断 （3）
          // gameInstance.SendMessage('OutSideInteractor', 'ReceiveAddSceneItemStr', 1)
          // // 说话秒数
          // gameInstance.SendMessage('OutSideInteractor', 'ReceiveAddSceneSecond', 10)   
      }
      
      function unityShowBanner(msg, type) {
        function updateBannerVisibility() {
          warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
        }
        var div = document.createElement('div');
        div.innerHTML = msg;
        warningBanner.appendChild(div);
        if (type == 'error') div.style = 'background: red; padding: 10px;';
        else {
          if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
          setTimeout(function() {
            warningBanner.removeChild(div);
            updateBannerVisibility();
          }, 5000);
        }
        updateBannerVisibility();
      }

      var buildUrl = "Build";
      var loaderUrl = buildUrl + "/web.loader.js";
      var config = {
        dataUrl: buildUrl + "/web.data.unityweb",
        frameworkUrl: buildUrl + "/web.framework.js.unityweb",
        codeUrl: buildUrl + "/web.wasm.unityweb",
        streamingAssetsUrl: "StreamingAssets",
        companyName: "DefaultCompany",
        productName: "人物模型",
        productVersion: "0.1",
        showBanner: unityShowBanner,
      };
      
      // By default Unity keeps WebGL canvas render target size matched with
      // the DOM size of the canvas element (scaled by window.devicePixelRatio)
      // Set this to false if you want to decouple this synchronization from
      // happening inside the engine, and you would instead like to size up
      // the canvas DOM size and WebGL render target sizes yourself.
      // config.matchWebGLToCanvasSize = false;

      if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
        // Mobile device style: fill the whole browser client area with the game canvas:

        var meta = document.createElement('meta');
        meta.name = 'viewport';
        meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
        document.getElementsByTagName('head')[0].appendChild(meta);
        container.className = "unity-mobile";

        // To lower canvas resolution on mobile devices to gain some
        // performance, uncomment the following line:
        // config.devicePixelRatio = 1;

        canvas.style.width = window.innerWidth + 'px';
        canvas.style.height = window.innerHeight + 'px';

        unityShowBanner('WebGL builds are not supported on mobile devices.');
      } else {
        // Desktop style: Render the game canvas in a window that can be maximized to fullscreen:

        canvas.style.width = "960px";
        canvas.style.height = "600px";
      }

      loadingBar.style.display = "block";

      var script = document.createElement("script");
      script.src = loaderUrl;
      script.onload = () => {
        createUnityInstance(canvas, config, (progress) => {
          progressBarFull.style.width = 100 * progress + "%";
        }).then((unityInstance) => {
          loadingBar.style.display = "none";
          fullscreenButton.onclick = () => {
            unityInstance.SetFullscreen(1);
          };
          
          myGameInstance = unityInstance
          console.log(1111,unityInstance);
          // setTimeout(()=>{
            vueInit()
          // },1000)

        }).catch((message) => {
          alert(message);
        });
      };
      document.body.appendChild(script);
    </script>
    <script src="./vue.js"></script>
    <!-- <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> -->
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <script type="text/javascript" src="./uni-webview-js.js"></script>
    <script type="text/javascript" src="./axios.js"></script>
    <script type="text/javascript" src="./record.js"></script>
    <script src="./detail.js"></script>
    <script>
      
      window.onload = function(){
        setTimeout(()=>{
          let recorder = new Recorder({
              type:"wav",   //此处的type类型是可修改的
              bitRate:16,      
              sampleRate:16000,
              bufferSize:8192,
          })
          let timer = null
          let startTouchData = {
            clientX:0,
            clientY:0
          }
          var recordBtn = document.getElementById("btnRecording");
          // var btnStopRecording = document.getElementById("btn-stop-recording");
          // btnStartRecording.onclick = function () {
          //   // recoderCallBack(22)
          //   recorder.start();
          // }
          // btnStopRecording.onclick = function () {
          // alert(111)
          //   recorder.stop();
          //   alert(recorder.duration);
          //   alert(recorder.getMP4Blob())
          // }
          recordBtn.addEventListener('touchstart', function (e) {
              console.log('touchstart');
              event.stopPropagation();
              event.preventDefault();
              recoderStartCallBack()
              // if(recorder){
              //   recorder.stop();
              //   recorder=null;
              // }
              startTouchData.clientX = e.changedTouches[0].clientX; //手指按下时的X坐标
              startTouchData.clientY = e.changedTouches[0].clientY; //手指按下时的Y坐标
              timer = setTimeout(function () {
                recorder.start();
              }, 300);
          });
  
          recordBtn.addEventListener('touchmove', function (e) {
            console.log(222,e);
            let touchData = e.touches[0]; //滑动过程中，手指滑动的坐标信息 返回的是Objcet对象
            let moveX = touchData.clientX - startTouchData.clientX;
            let moveY = touchData.clientY - startTouchData.clientY;
            recoderMoveCallBack(moveY)
          
            timer = setTimeout(function () {
              clearTimeout(timer);
              timer = null;
            });
          });

          recordBtn.addEventListener("touchend", function (e) {
            console.log('touchend');
            
            // if(recorder){
            //     return;
            // }
            // recorder.pause();
            // alert(JSON.stringify(recorder))
            var blob = recorder.getWAVBlob();
            console.log('touchend',blob,vm);
            let formData = new FormData();
            formData.append("file",blob,'mp4');
            console.log(formData);
            vm.timer = setTimeout(()=>{
              vm.recording =  false // 录音中
            },220)
            vm.recordPopupShow =  false// 录音弹窗
            let config= {
              headers: {
                'Authorization':'Bearer '+ vm.params.token,
                "Content-Type": "multipart/form-data"
              }
            };
            axios.post(vm.APIThird+'/tencent/cloud/voiceToWord?language=' + Number(vm.params.language), formData, config)
            .then(function (res) {
              alert(JSON.stringify(res))
              if(res.data.code === 200){
                vm.handleTranslate(res.data.word.split(''))
              }else{
                vm.Toast(res.data.message)
              }
            })
            .catch(function (error) {
              console.log(error);
            });
            // vm.recoderEndCallBack(blob)
            clearTimeout(timer);
            recorder.stop();
            return false;
          });
        },1000)
        
      }
    </script>
  </body>
</html>
